<template>
  <div id="bottom">
    <div id="cloth">
      <button id="return" @click="release">&#xe6ff;</button>
      <div id="left">
        <img :src="url" />
        <input
          type="file"
          accept="image/jpeg,image/jpg,image/png"
          @change="changeImage"
          name="file"
        />
      </div>
      <div id="right">
        <p id="content">
          商品名称：
          <input
            type="text"
            v-model="gname"
            value="gname"
            placeholder="请输入商品名称"
          />
          <br />
        </p>
        <p id="content">
          商品价格：
          <input
            type="text"
            v-model="price"
            value="price"
            placeholder="请输入商品价格"
          /><br />
        </p>
        <p id="content">
          商品类型：
          <select
            name="gtype"
            id=""
            v-model="gtype"
            @keydown.enter="get(gid, gname, state)"
          >
            <option value="" style="height: 24px">选择商品状态</option>
            <option value="闲置数码">闲置数码</option>
            <option value="校园代步">校园代步</option>
            <option value="电器日用">电器日用</option>
            <option value="图书教材">图书教材</option>
            <option value="美妆衣物">美妆衣物</option>
            <option value="运动棋牌">运动棋牌</option>
            <option value="票卷小物">票卷小物</option>
          </select>
          <br />
        </p>
        <p id="content">
          商品描述：
          <textarea
            wrap="50"
            rows="10"
            name="detailed"
            placeholder="请对商品进行描述"
            v-model="detailed"
          ></textarea
          ><br />
        </p>
        <button id="info" @click="info">发布商品</button>
      </div>
    </div>
  </div>
</template>

<script>
import VueCookies from "vue-cookies";
import axios from "axios";
import router from "../router";

export default {
  methods: {
    release: function () {
      (this.gname = ""),
        (this.price = ""),
        (this.gtype = ""),
        (this.detailed = ""),
        (this.url = "");
      // 返回页面
      router.replace({
        name: "/",
      });
    },
    // 该方法将选择的照片丢给img
    changeImage(e) {
      var file = e.target.files[0];
      var reader = new FileReader();
      var that = this;
      this.file = file;
      reader.readAsDataURL(file);
      //   console.log(reader);
      reader.onload = function (e) {
        that.url = this.result;
      };
      //   console.log(that.url);
    },
    info: function () {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        // 对内容的判断
        if (this.file == "") {
          alert("请选择上传的照片！");
        } else {
          if (
            this.gname.trim() == "" ||
            this.gtype == "" ||
            this.price.toString().trim() == "" ||
            this.detailed.trim() == ""
          ) {
            alert("请将内容填写完整！！！");
          } else {
            // 处理参数到文件对象中
            let forms = new FormData();
            forms.append("uid", VueCookies.get("uid"));
            forms.append("ucookie", VueCookies.get("ucookie"));
            forms.append("gname", this.gname.trim());
            forms.append("gtype", this.gtype);
            forms.append("price", this.price);
            forms.append("detailed", this.detailed.trim());
            forms.append("file", this.file);

            let config = {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            };

            // console.log(this.gtype);
            axios
              .post("http://localhost:8081/lo/goods/setgoods", forms, config)
              .then((res) => {
                console.log("请求成功");
                // console.log(res);
                (this.url = ""),
                  (this.gname = ""),
                  (this.price = ""),
                  (this.gtype = ""),
                  (this.detailed = ""),
                  (this.file = "");
                alert("发布成功！");
                // 跳转到主页面
                router.replace({
                  name: "/",
                });
              })
              .catch((error) => {
                console.log("请求失败");
                // console.log(error);
              });
          }
        }
      }
    },
  },
  data() {
    return {
      url: "",
      gname: "",
      price: "",
      gtype: "",
      detailed: "",
      file: "",
      uid: VueCookies.get("uid"),
      ucookie: VueCookies.get("ucookie"),
    };
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_five.ttf") format("truetype");
}
#bottom {
  width: 100%;
  height: 1000px;
  position: fixed;
  top: 0px;
  z-index: 9;
  background-color: rgba(221, 218, 218, 0.5);
  /* opacity: 0.5; */
}
#bottom #cloth {
  width: 80%;
  height: 600px;
  position: fixed;
  z-index: 10;
  top: 80px;
  left: 10%;
  background-color: rgb(255, 255, 255);
  overflow: hidden; /* 清除浮动 */
}

#cloth #return {
  font-family: "iconfont" !important;
  font-size: 55px;
  border: 0px;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer; /* 经过有手指*/
}

#cloth #left {
  width: 30%;
  height: 480px;
  float: left;
  margin-top: 80px;
  margin-left: 50px;
  /* border: 1px solid rebeccapurple; */
}

#left img {
  width: 95%;
  height: auto;

  object-fit: scale-down; /* 让img的尺寸不被拉伸 */
}

#cloth #right {
  width: 50%;
  height: 300px;
  float: left;
  margin-top: 80px;
  margin-left: 80px;
  /* border: 1px solid rebeccapurple; */
}

#right #content,
select {
  font-size: 20px;
  margin-left: 30px;
  margin-left: 0px;
}

#right #content input {
  height: 24px;
  /* border: 0px; */
  padding: 0px;
  padding-left: 10px;
  vertical-align: bottom; /*调整对齐线*/
}

#right #content textarea {
  width: 300px;
  resize: none;
  vertical-align: top; /*调整对齐线*/
  padding-left: 10px;
  padding-top: 10px;
}

#right #info {
  width: 100px;
  height: 50px;
  margin-top: 50px;
  margin-left: 150px;
}
</style>